<template>
  <view style="width: 100%;background-color: #fff;padding: 10rpx 0px;box-sizing: border-box;margin-top: 10rpx;">
    <scroll-view scroll-y="true" enable-back-to-top class="scroll-box" :style="{ height: pageHeight + 'px' }">
      <view class="list" v-for="(item,index) in activityList" :key='index' :style="{background:item.color}"
        @click="navTo('Sale/Information/richText?type=Activity&id=' + item.id)">
        <view class="type">{{item.name}}</view>
        <view class="column but">
          <view>{{item.type}}</view>
          <view>点击查看</view>
        </view>
      </view>
      <Popu v-if="activityList.length<1" :pageHeight="pageHeight" text="暂无活动信息"></Popu>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navTo } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  const props = defineProps({
    activityList: {
      type: Object
    },
  });
  const pageHeight = ref();
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 230;
    },
  });
</script>

<style scoped lang="less">
  .list:nth-last-child(1) {
    margin-bottom: 0px;
  }

  .list {
    width: 97%;
    margin: 0rpx auto 10rpx;
    position: relative;
    border-radius: 5px;
    background: linear-gradient(-37deg, #FD6E89 0%, #FF8B9E 100%);
    height: 200rpx;

    .type {
      position: absolute;
      top: 0px;
      right: 0px;
      // width: 130rpx;
	  padding:0px 10rpx;
	  box-sizing: border-box;
      height: 48rpx;
      background: rgba(255, 255, 255, .3);
      border-radius: 0px 0px 0px 10px;
      text-align: center;
      line-height: 48rpx;
      color: #fff;
    }

    .but {
      width: 40%;
      margin: 0px 30rpx;
      height: 200rpx;

      view:nth-of-type(1) {
        font-size: 36rpx;
        color: #FFFFFF;
        margin-bottom: 20rpx;
      }

      view:nth-of-type(2) {
        width: 160rpx;
        height: 52rpx;
        background: #FFFFFF;
        border-radius: 26rpx;
        text-align: center;
        line-height: 52rpx;
        color: #FB6495;
      }
    }
  }
</style>